<template>
  <div class="main-container">
    <div class="top">
      <div class="item-bg left" style="width: 50%; height: 100%">
        <span class="title">{{ lsxm }}教师评统计 </span>
        <table class="topClose" width="100%">
          <thead>
            <tr>
              <th colspan="2">评阅教师</th>
              <th colspan="3">评阅科目</th>
              <th colspan="2">科目总分</th>
              <th colspan="2">已评试题</th>
            </tr>
          </thead>
        </table>
        <div class="tabodyCls">
          <table class="topClose" width="100%">
            <tbody v-if="pingtyueObj?.length">
              <tr v-for="item in pingtyueObj">
                <td colspan="2">{{ item.jsGh }}({{ item.jsXm }})</td>
                <td colspan="3">{{ item.kmdm }}({{ item.kmmc }}) </td>
                <td colspan="2">{{ item.kmZf }}分</td>
                <td colspan="2">{{ item.ypStSl }}题</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="item-bg right" style="flex: 1; height: 100%">
        <span class="title">
          {{ lsxm }}评阅分析
          <div class="screen">
            <div
              class="day"
              :class="adtiveValue == 1 ? 'screen-active' : ''"
              @click="changeData(1)"
            >
              按天
            </div>
            <div
              class="hour"
              :class="adtiveValue == 2 ? 'screen-active' : ''"
              @click="changeData(2)"
            >
              按小时
            </div>
          </div>
          <span class="tofaixe" @click="router.back()"> 返回上一页 </span>
        </span>
        <div style="width: 100%; height: 80%" ref="chartDiv1"></div>
      </div>
    </div>
    <div class="bottom">
      <info-list style="height: 100%" :seleArr="seleArr" :activeKey="seleArr[0]?.value" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import infoList from './info-list.vue'
import { router } from '/@/router'
import { useRoute } from 'vue-router'
import { pjlsProgress, SpPjlsProgress, getSfdReviewTeacDetail } from '/@/api/qualityInspection'
const route = useRoute()
const rowId = ref(route.query.rw || '')
const lsxm = ref(route.query.name)
const activeKey = ref(route.query.activeKey)
const chartDiv1 = ref()
const chartDivInit = ref()
const chartDivInit1 = ref()
const adtiveValue = ref(1)
const rate = ref(0)
let angle = 0 //角度，用来做简单的动画效果的
const option = ref({
  backgroundColor: '#fff',
  graphic: [
    {
      type: 'text',
      top: '40%',
      left: 'center',
      zlevel: 100,
      style: {
        text: '已完成',
        x: 100,
        y: 100,
        fontSize: 14,
        textAlign: 'center',
      },
    },

    {
      type: 'text',
      top: '54%',
      left: 'center',
      zlevel: 100,
      style: {
        text: rate.value + '%',
        x: 100,
        y: 100,
        fontWeight: 'bold',

        fontSize: 16,
      },
    },
  ],
  polar: {
    radius: ['44%', '50%'],
    center: ['50%', '50%'],
  },
  angleAxis: {
    max: 100,
    show: false,
  },
  radiusAxis: {
    type: 'category',
    show: true,
    axisLabel: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
  },
  series: [
    {
      name: '',
      type: 'custom',
      coordinateSystem: 'none',
      renderItem: function (params, api) {
        return {
          type: 'arc',
          shape: {
            cx: api.getWidth() / 2,
            cy: api.getHeight() / 2,
            r: (Math.min(api.getWidth(), api.getHeight()) / 2.3) * 1.11,
            startAngle: ((0 + -angle) * Math.PI) / 180,
            endAngle: ((360 + -angle) * Math.PI) / 180,
          },
          style: {
            stroke: '#0CD3DB',
            fill: 'transparent',
            lineWidth: 1,
          },
          silent: true,
        }
      },
      data: [0],
    },
    {
      type: 'pie',
      startAngle: 0,
      radius: ['83%', '90%'],
      center: ['50%', '50%'],
      data: [
        {
          hoverOffset: 1,
          value: rate.value,
          name: '',
          itemStyle: {
            normal: {
              color: '#00f0ff',
            },
          },
          label: {
            show: false,
          },
          labelLine: {
            normal: {
              smooth: true,
              lineStyle: {
                width: 0,
              },
            },
          },
          hoverAnimation: false,
        },
        {
          label: {
            show: false,
          },
          labelLine: {
            normal: {
              smooth: true,
              lineStyle: {
                width: 0,
              },
            },
          },
          value: 100 - rate.value,
          hoverAnimation: false,
          itemStyle: {
            color: 'rgba(251, 200, 79, 0)',
          },
        },
      ],
    },
    {
      name: '',
      type: 'pie',
      startAngle: 90,
      radius: '80%',
      hoverAnimation: false,
      center: ['50%', '50%'],
      itemStyle: {
        normal: {
          labelLine: {
            show: false,
          },
          color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
            {
              offset: 1,
              color: 'rgba(223, 238, 254, 1)',
            },
            {
              offset: 0,
              color: 'rgba(223, 238, 254, 0)',
            },
          ]),
          shadowBlur: 10,
        },
      },
      data: [
        {
          value: 99,
        },
      ],
    },
  ],
})
const option1 = ref({
  legend: {
    data: ['某某教师', '某某某教师'],
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '4%',
    containLabel: true,
  },
  xAxis: {
    show: false,
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  yAxis: {
    type: 'value',
    name: '分数',
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: '#C6C6C6',
      },
    },
  },
  series: [
    {
      name: '某某教师',
      type: 'line',
      symbolSize: 8, //设定实心点的大小
      stack: 'Total',
      symbol: 'circle',
      data: [120, 132, 101, 134, 90, 230, 210],
    },
    {
      name: '某某某教师',
      type: 'line',
      symbol: 'circle',
      symbolSize: 8, //设定实心点的大小
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310],
    },
  ],
})
// 点击切换按钮
const changeData = value => {
  adtiveValue.value = value
}
const getPjlsProgress = () => {
  if (activeKey.value == 2) {
    pjlsProgress(rowId.value).then(res => {
      if (res.code == 1) {
        option.value.graphic[1].style.text = rate.value + '%'
        option.value.series[1].data[1].value = 100 - rate.value
        option.value.series[1].data[0].value = rate.value
        chartDivInit.value.setOption(option.value)
      }
    })
  } else if (activeKey.value == 1) {
    SpPjlsProgress(rowId.value).then(res => {
      if (res.code == 1) {
        option.value.graphic[1].style.text = rate.value || 0 + '%'
        option.value.series[1].data[1].value = 100 - rate.value
        option.value.series[1].data[0].value = rate.value
        chartDivInit.value.setOption(option.value)
      }
    })
  }
}

// 评阅教师详情
const pingtyueObj = ref([])
const seleArr = ref<any>([])
const getTicherInfo = async () => {
  let { code, data } = await getSfdReviewTeacDetail({
    kmYear: route.query.kmYear,
    kmpyzt: route.query.Kmpyzt,
    jsXxId: route.query.id,
    kmdm: route.query.kmdm,
    stLx: route.query.stLx,
  })
  if (code == 200) {
    pingtyueObj.value = data
    if (data) {
      data.forEach(element => {
        seleArr.value.push({
          value: element.jsXxId,
          label: element.jsXm,
        })
      })
    }
  }
}

onMounted(() => {
  getPjlsProgress()
  getTicherInfo()
  chartDivInit1.value = echarts.init(chartDiv1.value)
  chartDivInit1.value.setOption(option1.value)
})
</script>
<style lang="less" scoped>
.main-container {
  display: flex;
  flex-direction: column;
  height: @c_height;
  justify-content: space-between;

  .item-bg {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    box-shadow: 0px 0px 6px 1px rgba(128, 144, 219, 0.16);
    border-radius: 6px 6px 6px 6px;
    position: relative;

    .title {
      width: 100%;
      padding: 10px 16px;
      font-weight: bold;
      color: #3f4355;
      font-size: 16px;
      font-family: PingFang SC-Bold, PingFang SC;
      border-bottom: 2px solid #f0f1f8;
      display: flex;
      align-items: center;

      .tofaixe {
        font-size: 14px;
        color: #999999;
        margin-left: 15px;
        font-weight: 500;
        cursor: pointer;
      }
    }
  }
}

.top {
  width: 100%;
  height: 200px;
  display: flex;

  .left {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 16px;

    .topClose {
      margin: 0;
      text-align: center;
      thead tr th {
        text-align: center;
        border: 1px solid #e8e8e8;
        line-height: 35px;
        background-color: #eff6ff;
        width: 12.5%;
        // &:nth-child(2) {
        //   width: 20%;
        // }
        // &:last-child {
        //   width: 10%;
        // }
      }

      tbody tr td {
        text-align: center;
        border: 1px solid #e8e8e8;
        line-height: 35px;
        width: 12.5%;
        // &:nth-child(3) {
        //   width: 10%;
        // }
        // &:nth-last-child(3) {
        //   width: 20%;
        // }
      }
    }

    .tabodyCls {
      height: 65%;
      overflow-y: auto;
      width: 100%;
      padding-right: 5;
    }
  }
}

.screen {
  display: flex;
  padding-left: 2%;
  flex: 1;

  div {
    width: 80px;
    height: 28px;
    line-height: 28px;
    border: 1px solid #eee;
    text-align: center;
    font-size: 15px;
  }
  .hour {
    border-left: none;
  }
}
.screen-active {
  background-color: #136cc4;
  border-color: #136cc4;
  color: #fff;
}

.bottom {
  position: relative;
  height: calc(100% - 220px);
  width: 100%;
}
</style>
